<template>
  <div id="views">
    <section class="sec1">
      <div class="relative">
        <div class="range">
          <p class="bg"></p>
        </div>
        <div class="rangeText">
          <div class="sts inThisStep">
            <p class="p1">
              <span class="inThis"></span>
            </p>
            <p class="p2">发起提现</p>
          </div>
          <div class="sts inThisStep">
            <p class="p1">
              <span class="inThis"></span>
            </p>
            <p class="p2">领取税筹任务</p>
          </div>
          <div class="sts">
            <p class="p1">
              <span class="radio"></span>
            </p>
            <p class="p2">上传凭证</p>
          </div>
          <div class="sts">
            <p class="p1">
              <span class="radio"></span>
            </p>
            <p class="p2">成功提现</p>
          </div>
        </div>
      </div>
    </section>
    <!--0任务领取审核中-->
    <section v-if="task.state == 5" class="sec2">
      <div class="d1">
        <p class="p1">
          <img src="../../common/imgs/audit5.png" alt="">
        </p>
        <p class="p2">任务领取审核中</p>
      </div>
      <div class="d2 detail">
        <p class="p1" v-if="task.name">
          <span class="left">众乐邦注册姓名</span>
          <span class="right">{{task.name}}</span>
        </p>
        <p class="p1" v-if="task.telphone">
          <span class="left">众乐邦注册手机号</span>
          <span class="right">{{task.telphone}}</span>
        </p>
        <p class="p1" v-if="task.withdraw_money">
          <span class="left">提现金额</span>
          <span class="right orange">{{task.withdraw_money}} CNY</span>
        </p>
        <p class="p1" v-if="task.process_time">
          <span class="left">审核时间</span>
          <span class="right">{{task.process_time}}</span>
        </p>
        <p class="p1" v-if="task.zlb_order_num">
          <span class="left">任务ID</span>
          <span class="right orange">#{{task.zlb_order_num}}</span>
        </p>
      </div>
    </section>
    <!--2任务审核拒绝-->
    <section v-if="task.state == 6" class="sec2">
      <div class="d1">
        <p class="p1">
          <img src="../../common/imgs/audit3.png" alt="">
        </p>
        <p class="p2">任务领取审核拒绝</p>
      </div>
      <div class="d2 detail">
        <p class="p1" v-if="task.name">
          <span class="left">众乐邦注册姓名</span>
          <span class="right">{{task.name}}</span>
        </p>
        <p class="p1" v-if="task.telphone">
          <span class="left">众乐邦注册手机号</span>
          <span class="right">{{task.telphone}}</span>
        </p>
        <p class="p1" v-if="task.withdraw_money">
          <span class="left">提现金额</span>
          <span class="right orange">{{task.withdraw_money}} CNY</span>
        </p>
        <p class="p1" v-if="task.process_time">
          <span class="left">审核时间</span>
          <span class="right">{{task.process_time}}</span>
        </p>
        <p class="p1" v-if="task.zlb_order_num">
          <span class="left">任务ID</span>
          <span class="right orange">#{{task.zlb_order_num}}</span>
        </p>
        <p class="p1" v-if="task.remark">
          <span class="left">拒绝原因</span>
          <span class="right refuseReson">{{task.remark}}</span>
        </p>
      </div>
      <div class="d3 sub">
        <button class="yellowbtn" @click="againGetTask">重新领取任务</button>
      </div>
    </section>
    <!--1任务申请审核通过-->
    <section v-if="task.state == 7" class="sec2">
      <div class="d1">
        <p class="p1">
          <img src="../../common/imgs/audit1.png" alt="">
        </p>
        <p class="p2">任务领取审核通过</p>
      </div>
      <div class="d2 detail">
        <p class="p1" v-if="task.name">
          <span class="left">众乐邦注册姓名</span>
          <span class="right">{{task.name}}</span>
        </p>
        <p class="p1" v-if="task.telphone">
          <span class="left">众乐邦注册手机号</span>
          <span class="right">{{task.telphone}}</span>
        </p>
        <p class="p1" v-if="task.withdraw_money">
          <span class="left">提现金额</span>
          <span class="right orange">{{task.withdraw_money}} CNY</span>
        </p>
        <p class="p1" v-if="task.process_time">
          <span class="left">审核时间</span>
          <span class="right">{{task.process_time}}</span>
        </p>
        <p class="p1" v-if="task.zlb_order_num">
          <span class="left">任务ID</span>
          <span class="right orange">#{{task.zlb_order_num}}</span>
        </p>
      </div>
      <div class="sec3">
        <div>
          <p class="p1">
            <span class="s1">请上传任务凭证</span>
            <span class="s2">(最多可上传9张)</span>
          </p>
          <div class="imgs">
            <label for="fileinput"  id="addBtn" class="hoverhand" v-if="imgs.length < 9">
              <input type="file" ref="fileInput" accept="image/*" id="fileinput" @change="fileChange" style="width: 0;height: 0;border: 0;opacity: 0">
<!--              <upload-image curId="fileinput" curRef="fileinput" :multiple="true" @inputChange="fileChange"/>-->
            </label>
            <span v-for="(item , index) in imgs" class="hoverhand" @click="showItemImg(item.src)">
              <img :src="item.src" alt="">
              <span class="delThis" @click.stop.prevent="delItemImg(item , index)"></span>
            </span>
          </div>
        </div>
        <div class="description">
          <textarea v-model="description" cols="30" rows="10" placeholder="请输入凭证说明 (20 - 50字)"></textarea>
        </div>
      </div>
      <div class="d3 sub">
        <button :class="imgs.length > 0 && description ? 'yellowbtn' : 'greybtn'" @click="postVoucher">提交凭证</button>
      </div>
    </section>
    <div :class="modalClass" id="modal-box" @click="hide">
      <div  id="content" @click="hide">
        <img :src="win_img" alt="" @click.stop="" >
      </div>
    </div>
    <login-zlb ref="loginZlb" @loginSuccess="taskAjax()"/>
  </div>
</template>

<script>
  import {taskDetail , fetchTaxTask , checkZlbLoginStatus , zlbFile , checkZlbFileUrl , postVoucher} from '../../http/api';
  import {apiReady} from "../../common/js/initApiApp";
  export default {
    name: "audit",
    inject : ['reload'],
    data(){
      return{
        taskStatus : 1, //审核状态 0任务申请审核中  1任务申请审核通过 2审核拒绝 3取消
        imgs : [], //上传的图片
        win_img : '', //弹窗图片
        modalClass : 'modal-hide',
        task : {},
        app : null,
        account : null,
        order_num : null,
        zlbToken : null,
        zlbUri : null,
        zlbBackFileMsg : [],
        description : null,//描述
      }
    },
    components:{
      UploadImage : resolve => { require(['../../components/UploadImage'], resolve) }, /*图片上传*/
      LoginZlb : resolve => { require(['../../components/loginZlb'],resolve) },//登录众乐帮
    },
    watch:{
      description(txt){
        this.description = txt.substring(0,50)
      }
    },
    mounted() {
      let query = this.$route.query;
      this.order_num = query.order_num;
      let thiz = this;
      window.apiready = function(){
        let app = apiReady.ready();
        thiz.app = app;
        thiz.app.closeFlower(0);
        thiz.account = thiz.app.getAccount();
        thiz.loadPage();
        thiz.app.closeW('step_1');
        thiz.app.closeW('step_3');
        thiz.app.closeW('step_4');
      };
    },
    methods:{
      loadPage(){
        let thiz = this;
        let param = {
          token : thiz.account.token,
          version : thiz.app.inAV,
          order_num : thiz.order_num,
          noToast : true,
          noLoading : true,
        };
        thiz.log('任务详情参数+',param);
        let httpArr = [
          checkZlbFileUrl(param).then(res => {
            thiz.log('获取上传地址res++++++',res);
            if(res.code == 200){
              let data = res.data;
              thiz.zlbToken = data.token;
              thiz.zlbUri = data.uri;
            }
          }),
          taskDetail(param).then(res => {
            thiz.log('任务详情res++++++',res);
            if(res.code == 200){
              let task = res.data.task;
              thiz.task = task;
            }
          })
        ];
        thiz.loading();
        Promise.all(httpArr).then(res => {
          thiz.closeLoading();
        })
      },
      hide(){
        this.modalClass = 'modal-hide';
      },
      fileChange(e){
        let thiz = this;
        // let inputFile = bak.inputFile;
        let inputFile = thiz.$refs.fileInput.files[0];
        let formdata = new FormData();
        formdata.append('file', inputFile);
        let param = {
          formdata : formdata,
          uri : thiz.zlbUri,
          token : thiz.zlbToken , //thiz.zlbToken
        };
        zlbFile(param).then(res => {
          if(res.code == 0){
            let data = res.data;
            let file_url = data.file_url;
            let file_id = data.file_id;
            thiz.zlbBackFileMsg.push({
              file_url : file_url,
              file_id : file_id,
            });
            thiz.$refs.fileInput.value  = '';
            let imgs = thiz.imgs;
            if(imgs.length < 9){
              imgs.push({
                src : file_url,
              });
            }
          }
        }).catch(err => {
          require('../../common/js/toast').toast(err.message);
        });
      },
      postVoucher(){
        let thiz = this;
        let app = thiz.app;
        if(thiz.description.length < 20){
          require('../../common/js/toast').toast('凭证说明最低需要20字');
          return;
        }
        let zlbBackFileMsg = thiz.zlbBackFileMsg;
        let file_ids = [];
        let file_urls = [];
        thiz.for(zlbBackFileMsg , (item , index) => {
          file_ids.push(item.file_id);
          file_urls.push(item.file_url);
        });
        let param = {
          token : thiz.account.token,
          version : thiz.app.inAV,
          zlb_order_num : thiz.task.zlb_order_num,
          description :  thiz.description,
          file_ids : file_ids.join(','),
          file_urls : file_urls.join(',')
        };
        let location = window.location.href.split('#')[0]+'#';
        postVoucher(param).then(res => {
          if(res.code == 200){
            require('../../common/js/toast').toast('提交凭证成功');
            app.trigger('loadList');
            thiz.timeout(function () {
              let path = location + '/taxReward_step3' + '?order_num='+ thiz.order_num;
              app.trigger('task_goPage',{ path : path , close : true , name :'step_3'});
            },1500)
          }
        });
      },
      delItemImg(item , index){
        this.imgs.splice(index ,1);
        this.zlbBackFileMsg.splice(index,1);
      },
      showItemImg(src){
        this.win_img = src;
        this.modalClass = 'modal-show';
      },
      taskAjax(){
        let thiz = this;
        let param = {
          token : thiz.account.token,
          version : thiz.app.inAV,
          zlb_order_num : thiz.task.zlb_order_num
        };
        thiz.log('领取任务接口参数+++',param);
        fetchTaxTask(param).then(res => {
          thiz.log('领取任务接口返回+++',res);
          if(res.code == 200){
            require('../../common/js/toast').toast('领取任务成功');
            thiz.app.trigger('loadList');
            thiz.timeout(function () {
              thiz.loadPage();
            },2000)
          }
        }).catch(err => {
          thiz.log('err+++',err)
        })
      },
      againGetTask(){
        let thiz = this;
        let param = {
          token : thiz.account.token,
          version : thiz.app.inAV,
        };
        checkZlbLoginStatus(param).then(res => {
          if(res.code == 200){
            thiz.taskAjax();
          }else{
            thiz.$refs.loginZlb.show();
            this.$refs.loginZlb.getApp(thiz.app);
          }
        });
      },
      openImgs(){
        let thiz = this;
        let app = this.app;
        let UIAlbumBrowser = window.api.require('UIAlbumBrowser');
        let imgarr = [];
        let pageArr = [];
        let imgAddNum = 9;
        //ios 压缩图片
        function compressImg() {
          var t = 0;//选择图片下标
          function compressPicture() {
            var imgPirtureios = "albuios" + new Date().getTime() + ".jpg";
            if (imgarr[t].pathCopy.split(".")[1] == "png" || imgarr[t].pathCopy.split(".")[1] == "PNG") {
              imgPirtureios = "albuios" + new Date().getTime() + ".png"
            }
            var imageFilter = api.require('imageFilter');
            imageFilter.compress({
              img: imgarr[t].pathCopy,
              save: {
                imgPath: 'fs://compImage',
                imgName: imgPirtureios
              },
              quality: 0.5
            }, function (ret, err) {
              if (ret && ret.status == true) {
                imgarr[t].newpath = "fs://compImage/" + imgPirtureios;
              } else {
                imgarr[t].newpath = imgarr[t].pathCopy;
              }
              t++;
              if (t < imgarr.length) {
                compressPicture();
              } else {
                api.hideProgress();
                appendImg();
                t = 0;
              }
            });
          }
          compressPicture();
        }
        function UIAlbumBrowser_transPath() {
          if (app.ST == "ios") {
            api.showProgress({
              title: '生成图片中...',
              text: '',
              modal: false
            });
            UIAlbumBrowser.batchTransPath({
              path: imgarr
            }, function (ret, err) {
              if (ret) {
                imgarr.length = 0;
                ret.path.map(function (item) {
                  imgarr.push({
                    pathCopy: item
                  })
                })
                compressImg();
              } else {
                console.log("err" + JSON.stringify(err));
              }
            });
          }
          else {
            api.showProgress({
              title: '生成图片中...',
              text: '',
              modal: false
            });
            var n = 0;
            //安卓选择相册的压缩
            function andriosImg(params) {
              var imgPirture = "albumanzhuo" + new Date().getTime() + ".jpg";
              if (imgarr[n].path.split(".")[1] == "png" || imgarr[n].path.split(".")[1] == "PNG") {
                imgPirture = "albumanzhuo" + new Date().getTime() + ".png"
              }
              app.compImg({
                img: imgarr[n].path,
                save: {
                  imgPath: 'fs://compImage',
                  imgName: imgPirture
                },
                quality: 0.5,
                isClarityimg: false
              }, function (ret, err) {
                if (ret && ret.status) {
                  imgarr[n].newpath = app.sd + "/compImage/" + imgPirture;
                } else {
                  imgarr[n].newpath = imgarr[n].path;
                }
                n++;
                if (n < imgarr.length) {
                  andriosImg();
                } else {
                  api.hideProgress();
                  // appendImg();
                  n = 0;
                }
              })
            }
            andriosImg();
          }
        }
        app.sheet({
            buttons: ["相册"],
            cancelTitle: "取消"
          },
          function (ret, err) {
          thiz.log('ret+++++++',ret);
            app.trigger("selectPic");
            var index = ret.buttonIndex;
            if (index == 1) {
              UIAlbumBrowser.imagePicker({
                max: imgAddNum - pageArr.length,
                showCamera: false,
                styles: {
                  bg: '#000000',
                  mark: {
                    position: 'top_right',
                    size: 20
                  },
                  nav: {
                    bg: '#000000',
                    cancelColor: '#fff',
                    cancelSize: 16,
                    nextStepColor: '#7fff00',
                    nextStepSize: 16
                  },
                  thumbnail: { //（可选项）返回的缩略图配置，**建议本图片不要设置过大** 若已有缩略图，则使用已有的缩略图。若要重新生成缩略图，可先调用清除缓存接口api.clearCache()。
                    w: 200, //（可选项）数字类型；返回的缩略图的宽；默认：原图的宽度
                    h: 200 //（可选项）数字类型；返回的缩略图的宽；默认：原图的高度
                  }
                },
                animation: true,
              }, function (ret2) {
                if (ret2.eventType == 'nextStep') {
                  thiz.log('ret.list++',ret2);
                  if (ret2.list && ret2.list.length > 0) {
                    if (app.ST == "ios") {
                      ret2.list.map(function (item) {
                        imgarr.push(item.path);
                      })
                    } else {
                      imgarr = ret2.list;
                    }
                    thiz.log('imgarr',imgarr);
                    // UIAlbumBrowser_transPath();
                  }
                  UIAlbumBrowser.closePicker();
                }
              });
            }
          })
      },
    }
  }
</script>

<style lang="less" type="text/less" scoped>
  body{
    background: #fff!important;
  }
  #views{
    background: #F8F8F8;padding-bottom: 0.48rem;
  }
  .sec1{
    height: 1.88rem;background: #fff;padding:0 0.54rem;padding-top: 0.7rem;
    >.relative{
      padding: 0 0.42rem;position: relative;
      >.range{
        position: relative;
        >.bg{
          background: #AAAAAA;height: 0.02rem;
        }
      }
      >.rangeText{
        color: #aaa;display: flex;justify-content: space-between;position: absolute;z-index: 1;left: 0;top: -0.14rem;width: 100%;
        >div{
          text-align: center;
          >.p1{
            display: inline-block;height: 0.28rem;overflow: hidden;
            >.radio{
              background: #aaa;width: 0.13rem;height: 0.13rem;display: block;border-radius: 50%;overflow: hidden;margin-top: 0.075rem;
            }
            >.inThis{
              display: inline-block;width: 0.28rem;height: 0.28rem;background: url("../../common/imgs/blackradio.png") center center no-repeat;
              background-size: 100% 100%;margin-top: 0;
            }
          }
          >.p2{
            font-size: 0.24rem;padding-top: 0.17rem;
          }
        }
        >.inThisStep{
          color: #262626;
        }
      }
    }
  }
  .sec2{
    background: #fff;margin-top: 0.2rem;
    >.d1{
      text-align: center;
      >.p1{
        padding: 0.2rem 0;font-size: 0;
        >img{
          width: 1.16rem;
        }
      }
      >.p2{
        color: #262626;font-size: 0.34rem;
      }
      >.p3{
        color: #F67311;font-size: 0.24rem;text-align: center;padding-top: 0.1rem;
      }
    }
    >.d2{
      padding: 0 0.3rem;padding-top: 0.35rem;
      >p{
        overflow: hidden;padding: 0.24rem 0rem;border-bottom: 0.01rem solid#EBEBEB;
        &:last-child{
          border-bottom: 0;
        }
        >span{
          font-size: 0.28rem;
        }
        >.left{
          float: left;color: #999;
        }
        >.right{
          float: right;
        }
        >.orange{
          color: #F67311;
        }
        >.refuseReson{
          width: 40%;display: inline-block;line-height: 120%;
        }
      }
    }
    >.sec3{
      background: #f8f8f8;margin-top: 0.2rem;padding-top: 0.2rem;
      >div{
        background: #fff;padding: 0.22rem 0.32rem;
        >.p1{
          color: #262626;
          >.s2{
            font-size: 0.24rem;color: #999;
          }
        }
        >.imgs{
          padding:0.18rem 0;padding-top: 0;overflow: hidden;
          >#addBtn{
            width: 0.93rem;height: 0.93rem;display: inline-block;font-size: 0;float: left;margin-right: 0.3rem;margin-top: 0.38rem;
            background: url("../../common/imgs/addImgsBtn.png") center center no-repeat;background-size: 100% 100%;
          }
          >span{
            width: 1.06rem;height: 1.06rem;display: inline-block;font-size: 0;float: left;margin-right: 0.3rem;position: relative;
            padding-right: 0.13rem;padding-top: 0.13rem;margin-top: 0.25rem;
            >img{
              width: 100%;height: 100%;
            }
            >.delThis{
              display: inline-block;width: 0.32rem;height: 0.32rem;position: absolute;z-index: 1;
              right: 0;top:0;background: url("../../common/imgs/delThisImg.png");background-size: 100% 100%;
            }
          }
        }
      }
      .description{
        padding-bottom: 0.3rem;padding-top: 0;
        >textarea{
          width: 100%;height: 1.4rem;resize:none;background: #eee;font-size: 0.26rem;padding: 0.2rem;border-radius: 0.08rem;
        }
        >textarea::-webkit-input-placeholder{color:#AFB2B8;font-size: 0.26rem;font-family: 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;}
        >textarea::-moz-placeholder {color:#AFB2B8;font-size: 0.26rem;font-family: 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;}
        >textarea:-ms-input-placeholder{color:#AFB2B8;font-size: 0.26rem;font-family: 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;}
        >textarea{font-family: 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;color: #262626}
      }
    }
  }
  .sub{
    padding: 0 0.3rem;padding-top: 0.4rem;background: #F8F8F8;
    >button{
      border-radius: 0.04rem;height: 0.88rem;font-size: 0.28rem;color: #181818;margin-top: 0;
    }
    >.greybtn{
      width: 100%;background: #ECECEC;
    }
  }
  #modal-box{
    position: fixed;z-index: 10;background: rgba(0,0,0,0.5);width: 100%;height: 100%;left: 0;top: 0;
    padding-top: 0;padding-bottom: 0;
    >div{
      width: 100%;height: 100%;left: 0;top: 0;display: flex;justify-content: center;align-items: center;margin: 0 auto;
      >img{
        max-width: 85%;max-height: 85%;
      }
    }
  }
  @media screen and (min-width: 1025px){
    #modal-box>div{
      width: 600px;left: 50%;
    }
  }
  @import "../../common/css/animate.css";
</style>
